<include file="public@header_vue"/>
<style>
    .el-pagination {
        margin-top: 20px;
    }

    .avatar {
        width: 40px;
        height: auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
</style>
</head>
<body>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="直播账号设置" v-loading="onDataLoading">
            <el-row>
                <el-col :span="20" v-if="role_id !== 3">
                    <el-form :inline="true" :model="form" class="demo-form-inline" size="mini">
                        <el-form-item label="公司名称：">
                            <el-input v-model="form.name" placeholder="公司名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getData()">查询</el-button>
                            <el-button type="danger" @click="clearForm()">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>

                <el-button :span="4" type="primary" size="mini" style="float: right" @click="edit(null)" v-if="role_id == 3 && totalNum == 0">新增</el-button>

            </el-row>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>

                <el-table-column prop="name" label="公司名称" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.company.name}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="user_login" label="账号" min-width="150" show-overflow-tooltip></el-table-column>

                <el-table-column prop="add_time" label="创建时间" min-width="170">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.create_time)}}
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" v-if="role_id == 3">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination background layout="total,prev, pager, next" :page-size="15" :total="totalNum" :current-page.sync="currentPage" @current-change="getAccountData"></el-pagination>

            <el-dialog :visible.sync="dialogVisible" v-loading.fullscreen="dialogLoading">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="user_login">
                        <el-col :span="12">
                            <el-input v-model="ruleForm.user_login" v-bind:disabled="ruleForm.id != ''" placeholder="请输入账号"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="密码" prop="user_pass">
                        <el-col :span="12">
                            <el-input type="password" v-model="ruleForm.user_pass" placeholder="请输入密码"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button v-if="ruleForm.id === ''" type="primary" @click="submit('ruleForm')">新增</el-button>
                    <el-button v-else type="primary" @click="submit('ruleForm')">修改</el-button>
                </span>
            </el-dialog>


        </el-tab-pane>
    </el-tabs>
</div>
</body>
<script>
    let id = 1000;
    var app = new Vue({
        el: '#app',
        data: function () {

            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            let self = this;
            return {
                role_id:null,
                tableData: [],
                companyData: [],
                form: {
                    name: '',
                    keyword: '',
                },
                ruleForm: {
                    id: '',
                    user_login: '',
                    user_pass: '',
                },
                sourceFrom: {
                    id: '',
                    name: '',
                    tag_list: [],
                },
                dialogVisible: false,
                dialogLoading: false,
                totalNum: 0,
                currentPage: 1,
                parent_info: [],
                show_name: {
                    label: 'name'
                },
                onDataLoading: false,

                rules: {
                    user_login: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    user_pass:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                    ],

                },
                headers: {'X-Requested-With': 'XMLHttpRequest'},

            };

        },
        created() {
            this.getData()
            this.getCompanyData()
        },
        methods: {
            clearForm() {
                this.form = {
                    name: '',
                }
            },
            edit(row) {
                if (row == null) {
                    this.ruleForm = {id: '', user_login: '', user_pass:'' };
                } else {
                    this.ruleForm = JSON.parse(JSON.stringify(row));//深拷贝
                }
                this.dialogVisible = true;
            },

            submit(ruleForm) {
                let _this = this;
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        //alert('submit!');
                        axios.post("{:url('admin/live/operation_account')}", this.ruleForm, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                            }
                        }).then(function (response) {
                            _this.dialogLoading = false;
                            if (response.data.code === 1) {
                                if (_this.ruleForm.id === '') {
                                    _this.$message({
                                        message: '新增完成',
                                        type: 'success'
                                    });
                                } else {
                                    _this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                }
                                _this.getData();
                                _this.dialogVisible = false;
                            } else {
                                _this.$message({
                                    message: response.data.msg,
                                    type: 'warning'
                                });
                            }
                        }).catch(function (error) {
                            _this.dialogLoading = false;
                            _this.$message.error(error.toString())
                        })
                    } else {
                        console.log('error submit!!');
                        _this.dialogLoading = false;
                        return false;
                    }
                });
            },


            getAccountData(page = 1) {
                let _this = this;
                let params = {page: page};
                this.onDataLoading = true;
                if (this.form.keyword !== '') {
                    params.keyword = this.form.keyword;
                }
                console.log(params);
                axios.get("{:url('admin/live/setting')}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    params: params
                }).then(function (response) {
                    console.log(response.data.data);
                    _this.onDataLoading = false;
                    if (response.data.code === 1) {
                        if (response.data.data) {
                            _this.sourceFrom = response.data.data;
                        } else {
                            _this.sourceFrom = {};
                        }

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(function (error) {
                    _this.onDataLoading = false;
                    _this.$message.error(error.toString())
                })
            },

            getCompanyData() {
                let _this = this;
                axios.get("{:url('admin/company/get_company_list')}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                }).then(function (response) {
                    _this.onDataLoading = false;
                    if (response.data.code === 1) {
                        _this.companyData = response.data.data;
                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(function (error) {
                    _this.onDataLoading = false;
                    _this.$message.error(error.toString())
                })
            },
            update(data) {
                let _this = this;
                console.log(data)
                if (data) {
                    _this.sourceFrom = JSON.parse(JSON.stringify(data));
                } else {
                    _this.sourceFrom = {
                        id: '',
                        name: '',
                        tag_list: [],
                    }
                }
                _this.dialogVisible = true;
                _this.dialogLoading = false;
            },

            //首页获取列表数据
            getData(page = 1) {
                let _this = this;
                let params = {page: page};
                this.onDataLoading = true;
                if (this.form.name !== '') {
                    params.name = this.form.name;
                }
                console.log(params);
                axios.get("{:url('admin/live/setting')}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    params: params
                }).then(function (response) {
                    console.log('1212');
                    console.log(response.data);
                    console.log(response.data.data);

                    _this.onDataLoading = false;
                    if (response.data.code === 1) {

                        _this.role_id      = response.data.data.role_id;
                        _this.tableData    = response.data.data.list.data;
                        _this.totalNum     = response.data.data.list.total;
                        _this.currentPage  = response.data.data.list.current_page;

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(function (error) {
                    _this.onDataLoading = false;
                    _this.$message.error(error.toString())
                })
            },

            formatDate(timestamp) {
                let date = new Date(timestamp * 1000);
                return date.getFullYear() + '-' + this.prefix(date.getMonth() + 1) + '-' + this.prefix(date.getDate()) + ' ' + this.prefix(date.getHours()) + ':' + this.prefix(date.getMinutes()) + ':' + this.prefix(date.getSeconds());
            },
            prefix(num) {
                if (num < 10) {
                    return '0' + num;
                }
                return num;
            }
        }
    });
</script>
